<template>
	<div class="siji">
		<ul class="siji_ul">
			<li>
				<router-link to="/">
					<h3>小众种草</h3>
				</router-link>
			</li>
			<li>
				<router-link to="/">
					<h3>游侠客独一无二的旅行体验</h3>
				</router-link>
			</li>
		</ul>
		
		<div class="siji_ul2 swiper">
			<ul class="swiper-wrapper">
				<li class="swiper-slide" v-for="item in sijiList" :key="item.id" >
					<router-link to="/">
						<div class="xzzc">
							<img :src="item.imgURL" :style="item.id==1 ? 'border-top-left-radius:0.4rem ; border-bottom-left-radius:0.4rem':'width:96%'"  />
							<aside>
								<h3>{{item.title}}</h3>
								<label>{{item.msg}}</label>
							</aside>
						</div>
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
//1.引入vue周期函数
import { onMounted } from 'vue';
//2.引入Swiper的动态组件
import Swiper , {
	Autoplay,
	EffectCoverflow,
	EffectCube,
	Pagination,
} from 'swiper';
//3.swiper组件应用配置
Swiper.use([ Autoplay , EffectCoverflow , EffectCube , Pagination ]);
	
	
	
export default{
	name:'Siji',
	props:['propssiji'],
	data(){
		return{
			sijiList:[]
		}
	},
	setup(){
		onMounted( ()=>{ 
			new Swiper( '.siji_ul2' , {
				//循环播放
				slidesPerView : 3
			} )
		} )
	},
	watch:{
		propssiji(){
			this.sijiList = this.propssiji;
		}
	}
}
</script>

<style scoped>
.siji{
	height: 4.2rem;
	width: 100%;
	padding-bottom: 1rem;
}
.siji .siji_ul{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.siji_ul li{
	text-align: center;
}
.siji_ul li a{
	text-decoration: none;
}
.siji_ul li:nth-child(1){
	width: 25%;
	line-height: 1rem;
	font-weight: bold;
	font-size: 0.42rem;
	color: black;
}
.siji_ul li:nth-child(1) a{
	color: black;
}
.siji_ul li:nth-child(2){
	width: 75%;
	line-height: 1rem;
	text-align: left;
	text-indent: 1em;
	font-size: 0.3rem;
}
.siji_ul li:nth-child(2) a{
	color: #ff9e51;
}
.siji_ul2{
	width: 100%;
}
.siji_ul2 ul li a{
	text-align: center;
}
.xzzc img{
	width: 96%;
}
.siji_ul2 ul li a .xzzc aside{
	text-align: center;
	position: absolute;
	bottom: 0rem;
	right: 0rem;
	left: 0rem;
}
.siji_ul2 ul li a .xzzc aside h3{
	font-size: 0.45rem;
	font-weight: bold;
	color: white;
}
.siji_ul2 ul li a .xzzc aside label{
	font-size: 0.3rem;
	line-height: 0.6rem;
	color: white;
}
.siji_ul2 ul li:nth-child(6) img{
	border-top-right-radius: 0.3rem;
	border-bottom-right-radius: 0.3rem;
}
</style>
